<template>
  <van-popup v-model:show="showModal" position="bottom" round>
    <van-nav-bar
        title="编辑作业"
        left-text="返回"
        left-arrow
        @click-left="closeModal"
    />
    <van-form @submit="onSubmit">

      <van-field
          name="title"
          label="标题："
          v-model="homework.title"
          placeholder="请输入作业标题"
          class="text"
      />
      <!-- 作业内容 -->
      <van-field
          type="textarea"
          v-model="homework.content"
          label="内容："
          placeholder="请输入作业内容"
          rows="5"
          class="text"
      />
      <!-- 日期选择器 -->
      <van-cell class="date-picker-cell">
        <div @click="showCalendar = true" >截止日期
          <img src="../../assets/images/calendar.png" class="calendar-icon" />
          <span v-if="selectedDate">{{ selectedDate }}</span>
          <span v-else>{{homework.finishdate}}</span>

        </div>
      </van-cell >

      <van-calendar
          v-model:show="showCalendar"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirm"
          color="rgba(101, 242, 13, 0.622)"
      />
      <van-button
          type="primary"
          class="submit-button"
          @click="submitHomework"
      >
        修改完成
      </van-button>
    </van-form>
  </van-popup>
</template>



<script setup>
import { ref, onMounted, watch, reactive} from 'vue';
import { Popup, NavBar, Form, Field, Button, DatetimePicker,Toast} from 'vant';
import axios from 'axios';
// 定义响应式状态
const showModal = ref(false);
const showCalendar = ref(false);
const selectedDate = ref(null);
const minDate = ref(new Date());
const maxDate = ref(new Date(new Date().getFullYear() + 5, 0, 1));
const emit = defineEmits(['update:homework']);
const homework = reactive({
  //接收id为Integer类型
  id: 0,
  title: '',
  content: '',
  finishdate: new Date()
});

const open = ({ id, title, content, finishdate }) => {
  console.log('open:', id, title, content, finishdate);
  homework.id = id; // 设置 homework 对象的 id 属性
  homework.title = title;
  homework.content = content;
  homework.finishdate = finishdate;
  showModal.value = true;
};
const submitHomework = () => {
  onSubmit();
};
defineExpose({
  open,
  submitHomework
});
const close = () => {
  showModal.value = false;
};



// 使用 emit
function closeModal() {
  close()
  emit('update:homework', homework);
}


const onSubmit = async () => {
  try {
    // 更新 homework 对象的 finishdate 属性

    console.log('homework:', homework)
    // 发送请求
    const response = await axios.post('/api/homework/updateHomework', homework);
    Toast.success('作业更新成功');
    console.log('作业更新成功', response.data);
    closeModal();
  } catch (error) {
    Toast.fail('作业更新失败');
    console.error('更新作业失败:', error);
  }
};

const onConfirm = (value) => {
  selectedDate.value = value.toISOString().split('T')[0];

  homework.finishdate = selectedDate.value;
  showCalendar.value = false; // 关闭日历
};

watch(() => homework.finishdate, (newVal) => {
  console.log('homework.finishdate updated:', newVal);
});

// 使用 Composition API 提供的生命周期钩子
onMounted(() => {
  // 组件挂载后执行的逻辑
});




</script>



<style scoped>
::v-deep .van-field__label {
  width: 15%;
}

.text {
  margin: 5px;
  background-color: #ffffff;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #1e1f22;
  width: 90%;
  margin: 15px;
}

.date-picker-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  margin: 5px;
  background-color: #ffffff;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #1e1f22;
  width: 90%;
  margin: 15px;
}

.calendar-icon {
  width: 20px;
  margin-right: 15px;
}

.submit-button {
  margin-left: 130px;
  background-color: rgba(165, 214, 63, 0.71);
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  width: 100px;
}
</style>